import { Container, ChoiceList } from "./styled";
import Title from "../Title";
import { Checkbox, Space } from "antd";
import type { CheckboxValueType } from "antd/es/checkbox/Group";
import { QuestionProps } from "@/api/question";
import MarkDownComponent from "../markdown";

const MulChoice = ({ index, data, handleCheck, value }: QuestionProps) => {
  const { type, question, options, description } = data
  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log(checkedValues)
    handleCheck(checkedValues)
  };
  return (
    <Container>
      <Title type={type} index={index} title={question} />
      {description && <MarkDownComponent text={description} />}
      <ChoiceList>
        <Checkbox.Group style={{ width: "100%" }} value={value as CheckboxValueType[]} onChange={onChange}>
          <Space direction="vertical">
            {(options ? JSON.parse(options) : []).map((it: string) => <Checkbox key={it} value={it}>{it}</Checkbox>)}
          </Space>
        </Checkbox.Group>
      </ChoiceList>
    </Container>
  );
};

export default MulChoice;
